<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
</head>
<body>

    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>

    <div class="cls1">div4</div>
    <div class="cls1">div5</div>

    <input type="button" name="username">

    <script>
      /**
       * Document：文档对象
       *  1.创建（获取）：在 html dom 模型中，可以使用 window对象 来获取
       *     1.window.document
       *     2.document
       *  2.方法：
       *    1.获取 Element 对象：
       *        1. getElementById()：根据 id 属性值获取 元素对象。id属性值 一般 唯一
       *        2. getElementsByTagName()：根据 元素名称 获取元素对象们。返回值是一个数组
       *        3. getElementsByClassName()：根据 class 属性值获取元素对象们。返回值是一个数组
       *        4. getElementsByName()：根据 name 属性值获取元素对象们。返回值是一个数组
       *    2.创建其他 DOM 对象：
       *        1. createAttribute(name)：创建拥有指定名称的属性节点，并返回新的 Attr 对象
       *        2. createComment()：创建注释节点
       *        3. createElement()：创建元素节点
       *        4. createTextNode()：创建文本节点
       *    3.属性：
       */

      //2.根据元素名称获取元素对象们。返回值是一个数组
      var divs = document.getElementsByTagName("div");
      alert(divs.length); //5

      //3.根据 class 属性值获取元素对象们。返回值是一个数组
      var div_cls = document.getElementsByClassName("cls1");
      alert(div_cls.length);//2

      //4.根据 name 属性值获取元素对象们。
      var ele_username = document.getElementsByName("username");
      alert(ele_username.length);//1

      //createElement()：创建元素节点
      var table = document.createElement("table");
      alert(table);


    </script>

</body>
</html>